<template>
  <!-- expandRowByClick -->
  <!-- :expandIcon="() => {}" -->
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="false"
    :expandIconColumnIndex="3"
    :expandIconAsCell="false"
    expandRowByClick
    :expandIcon="
      () => {
        return ''
      }
    "
    rowKey="id"
  >
    <a slot="agentSlot" slot-scope="agentName" href="javascript:;">{{ agentName }}</a>
    <template slot="expandedRowRender" slot-scope="record">
      <a-row class="rowCore" v-for="(item, index) in record.agentList" :key="index">
        <a-col style="width: 19%" :span="4"> {{ item.name }} </a-col>
        <a-col style="width: 24%" :span="4"> {{ item.tel }} </a-col>
        <a-col style="width: 50%" :span="4"> {{ item.addr }} </a-col>
        <a-divider type="vertical" />
      </a-row>
    </template>
  </a-table>
</template>

<script>
import { getApplicantAndAgent } from '@/api/accept/apl_applicant.js'
export default {
  props: {
    applyid: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      data: [],
      columns: [
        { title: '姓名', width: 80, dataIndex: 'name', key: 'name' },
        { title: '联系电话', width: 100, dataIndex: 'tel', key: 'tel' },
        { title: '地址', width: 150, dataIndex: 'addr', key: 'addr' },
        { title: '代理人', width: 100, dataIndex: 'agentName', scopedSlots: { customRender: 'agentSlot' } }
      ]
    }
  },
  created (agentList) {
    console.log('agentList111', agentList)
    this.queryList(this.applyid)
  },
  methods: {
    // 获取代理人
    getAgent () {
      return 'getAgent'
    },
    async queryList (applyid) {
      const { data } = await getApplicantAndAgent(applyid)
      console.log('data', data)
      data &&
        data.forEach(v => {
          if (v.agentList && v.agentList.length > 0) {
            let arr = []
            v.agentList.forEach(a => {
              arr.push(a.name)
            })
            v.agentName = arr.join(',')
          }
        })
      this.data = data || []
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-table-expanded-row {
  // border: 1px solid red;
  padding: 0 !important;
}
.rowCore {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 30px;
  // border: 1px solid red;
  padding-top: 4px;
  margin: 0;
}
</style>
